<template>
    <div class="change">
        <van-nav-bar
                title="切换身份"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div>
            <div @click="select(0)">
                <img src="/img/person100.jpg" alt="">
                <van-button type="primary">个人身份</van-button>
            </div>
            <div>
                <img src="/img/company100.gif" alt="">
            </div>
            <div @click="select(1)">
                <img src="/img/company100.jpg" alt="">
                <van-button type="primary">企业身份</van-button>
            </div>
            <div @click="select(2)">
                <van-button class="cancel" type="default">取消</van-button>
            </div>
        </div>
    </div>
</template>
<script>
    import { Button,Dialog } from 'vant';
    import Vue from 'vue';
    import {mapMutations,mapState} from 'vuex';

    Vue.use(Button);
    export default {
        created(){
            document.body.style.backgroundColor='#fff'
        },
        methods: {
            ...mapMutations(['saveUserInfo']),
            onClickLeft() {
                history.back()
            },
            select(item){
                let access_token = localStorage.getItem('access_token')
                let user = JSON.parse(localStorage.getItem('user'));
                let _text = user.type==0?'企业':'个人';
                if(item ==user.type){
                    Dialog.alert({message:`您现在的身份已经是${_text}啦,不需要切换了`})
                    return;
                };
                this.$dialog.confirm({
                    title: '身份切换',
                    message: `您确定要切换为${_text}版吗`
                }).then(() => {
                    this.$post('/api/user/change',{type:item,uid:user.uid,access_token}).then(res=>{
                        if(res.data.err_code == 0){
                            this.saveUserInfo({user:res.data.data.user,access_token:res.data.data.access_token})
                            window.localStorage.setItem('user',JSON.stringify(res.data.data.user))
                            window.localStorage.setItem('access_token',JSON.stringify(res.data.data.access_token))

                            Dialog.alert({message:`身份切换成功,您当前的身份是:${res.data.data.user.type==1?'企业版':'个人版'}`}).then(()=>{
                                this.$router.replace({path:'/'})
                            })
                        }else{
                            Dialog.alert({message:res.data.err_msg})
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
</script>
<style lang="less" scoped>
    img[src$='.jpg']{
        height: 170px;
        margin: 0 auto;
        width: 170px;
        display: block;
    }
    img[src$='.gif']{
       width: 100%;
    }
    button{
        display: block;
        margin: 10px auto;
        min-width:150px;
        /*background: #366df0;*/
        background: none;
        color: #366df0;
        border: 1px solid #366df0;

    }
    .cancel{
        color: #366df0;
        background: none;
        margin-top: 100px;
        outline: none;
        border: none;

    }
</style>
